<!--
 * @Description: 业务建模-异常建模
 * @Autor: 曹敬涛
 * @Date: 2021-08-04 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 16:02:46
-->
<div class="suppliess">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>异常建模</span>
                </h3>
            </div>
        </div>
    </div>
    <div style="padding: 15px;">
        <div class="col-lg-12">
            <div class="m-portlet m-portlet--mobile">
                <div class="row align-items-center" style="width: 100%;padding-top: 20px;">
                    <div class="primeng-datatable-container" style="margin-left: 5px;">
                        <div class="col-md-12" style=" float: left; width: 100%">

                            <div style="margin-top: 10px;">
                                <p-button *ngIf="'Pages.AnomalyModeling.NewLevel' | permission" label="新增异常严重等级" (click)="display=true"></p-button>
                            </div>
                            <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                                <p-table #dataTable [value]="primengTableHelper.records"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                    (onLazyLoad)="getSeverityList($event)" [paginator]="false" [lazy]="true"
                                    [scrollable]="true" [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 100px">操作</th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">异常严重等级名称</th>
                                            <th style="width: 150px">异常严重等级定义</th>
                                            <th style="width: 150px">异常抄送角色</th>
                                            <th style="width: 150px">是否使用</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 100px">
                                                <div class="btn-group dropdown" dropdown container="body">
                                                    <button dropdownToggle
                                                        class="dropdown-toggle btn btn-sm btn-primary">
                                                        <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                                    </button>
                                                    <ul class="dropdown-menu" *dropdownMenu>
                                                        <li>
                                                            <a href="javascript:;" *ngIf="'Pages.AnomalyModeling.SeverityModification' | permission"
                                                                (click)="updateDataTable(rowIndex)">修改</a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" *ngIf="'Pages.AnomalyModeling.SeverityDeletion' | permission"
                                                                (click)="deleteEv(record.id,'deleteInspectionSeverityDesc')">删除</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="width: 50px">{{rowIndex+1}}</td>
                                            <td style="width: 150px">{{record.severityName}}</td>
                                            <td style="width: 150px">{{record.severityDesc}}</td>
                                            <td style="width: 150px">{{record.ccRole}}</td>
                                            <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        (onPageChange)="getSeverityList($event)"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div style="display: flex;padding: 15px;">
        <div class="col-lg-6">
            <div class="m-portlet m-portlet--mobile">
                <span class="title">父级</span>
                <div>
                    <p-button *ngIf="'Pages.AnomalyModeling.AddException' | permission" label="新增一级异常" (onClick)="parentDia = true"></p-button>
                </div>
                <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                    <p-table #typeData [value]="primengTypeTableHelper.records" (onLazyLoad)="getDescList($event)"
                        rows="{{primengTypeTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                        [scrollable]="true" [responsive]="primengTypeTableHelper.isResponsive"
                        [resizableColumns]="primengTypeTableHelper.resizableColumns" selectionMode="single"
                        [(selection)]="selected">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width: 100px">操作</th>
                                <th style="width: 50px">序号</th>
                                <th style="width: 150px">名称</th>
                                <th style="width: 150px">创建时间</th>
                                <th style="width: 150px">是否使用</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                            <tr style="cursor: pointer;" (click)="changeChild(rowIndex)" [pSelectableRow]="record">
                                <td style="width: 100px">
                                    <div class="btn-group dropdown" dropdown container="body">
                                        <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                            <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                        </button>
                                        <ul class="dropdown-menu" *dropdownMenu>
                                            <li>
                                                <a *ngIf="'Pages.AnomalyModeling.LevelModification' | permission" href="javascript:;" (click)="updateLevelTable(rowIndex)">修改</a>
                                            </li>
                                            <li>
                                                <a *ngIf="'Pages.AnomalyModeling.LevelDeletion' | permission" href="javascript:;"
                                                    (click)="deleteEv(record.id,'deleteInspectionTypeDesc')">删除</a>

                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td style="width: 50px">{{rowIndex+1}}</td>
                                <td style="width: 150px">{{record.typeName}}</td>
                                <td style="width: 150px">{{record.creationTime | date:'yyyy-MM-dd'}}</td>
                                <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                            </tr>
                        </ng-template>
                    </p-table>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTypeTableHelper.defaultRecordsCountPerPage" #typePaginator
                            [totalRecords]="primengTypeTableHelper.totalRecordsCount"
                            (onPageChange)="getDescList($event)"
                            [rowsPerPageOptions]="primengTypeTableHelper.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                            {{'TotalRecordsCount' | localize:primengTypeTableHelper.totalRecordsCount}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="m-portlet m-portlet--mobile">
                <span class="title">子级</span>
                <div>
                    <p-button *ngIf="'Pages.AnomalyModeling.NewException' | permission" label="新增二级异常" (onClick)="childDia = true"></p-button>
                </div>
                <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                    <p-table #sonData [value]="primengSonTableHelper.records"
                        rows="{{primengSonTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                        [scrollable]="true" [responsive]="primengSonTableHelper.isResponsive"
                        [resizableColumns]="primengSonTableHelper.resizableColumns">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width: 100px">操作</th>
                                <th style="width: 50px">序号</th>
                                <th style="width: 150px">二级异常</th>
                                <th style="width: 150px">责任部门</th>
                                <th style="width: 150px">处理角色</th>
                                <th style="width: 150px">发布日期</th>
                                <th style="width: 150px">是否使用</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                            <tr>
                                <td style="width: 100px">
                                    <div class="btn-group dropdown" dropdown container="body">
                                        <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                            <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                        </button>
                                        <ul class="dropdown-menu" *dropdownMenu>
                                            <li>
                                                <a *ngIf="'Pages.AnomalyModeling.TwoLevelModification' | permission" href="javascript:;" (click)="updateChildTable(rowIndex)">修改</a>
                                            </li>
                                            <li>
                                                <a *ngIf="'Pages.AnomalyModeling.TwoLevelDeletion' | permission" href="javascript:;"
                                                    (click)="deleteEv(record.id,'deleteInspectionItemInfo')">删除</a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td style="width: 50px">{{rowIndex+1}}</td>
                                <td style="width: 150px">{{record.itemName}}</td>
                                <td style="width: 150px">{{record.organizationUnits}}</td>
                                <td style="width: 150px">{{record.role}}</td>
                                <td style="width: 150px">{{record.creationTime | date:'yyyy-MM-dd'}}</td>
                                <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                            </tr>
                        </ng-template>
                    </p-table>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengSonTableHelper.defaultRecordsCountPerPage" #sonPaginator
                            [totalRecords]="primengSonTableHelper.totalRecordsCount"
                            (onPageChange)="getInfoList(pid,$event)"
                            [rowsPerPageOptions]="primengSonTableHelper.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                            {{'TotalRecordsCount' | localize:primengSonTableHelper.totalRecordsCount}}
                        </span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <p-dialog header="异常严重等级" [(visible)]="display" (onHide)="displayclose()" modal="modal" [responsive]="true"
        [style]="{width: '40%', height: '50%'}">
        <form *ngIf="display" #displayForm="ngForm" class="business-dept" novalidate autocomplete="off"
            (ngSubmit)="addSeverityDesc()">
            <div class="p-formgroup-inline">
                <div class="form-group" style="display: flex;">
                    <label class="label-width" for="stageSign">*异常严重等级名称：</label>
                    <input id="stageSign" style="width: 200px;height: 35px;" #stageSignInput="ngModel" name="stageSign"
                        class="input-lable" [(ngModel)]="ngDisplayForm.severityName" required />
                    <validation-messages [formCtrl]="stageSignInput"></validation-messages>
                </div>
                <div class="form-group " style="display: flex;">
                    <label class="label-width" for="repairPartSelect">*异常抄送角色：</label>
                    <!-- <p-multiSelect (onChange)="unitChangeEv($event.value)" [options]="unitsList" id="repairPartSelect"
                        filter="filter" optionLabel="displayName" dataKey="id" name="repairPart"
                        #repairPartSelect="ngModel" required [(ngModel)]="ccRole"  [itemSize]="34"
                        defaultLabel="请选择"></p-multiSelect> -->
                    <p-multiSelect [panelStyle]="{width:'200px'}" [options]="unitsList" name="ccRole"
                        #ccRoleSelect="ngModel" [(ngModel)]="ccRole" defaultLabel="请选择" required
                        optionLabel="displayName" dataKey="id">
                    </p-multiSelect>
                    <validation-messages [formCtrl]="ccRoleSelect"></validation-messages>
                </div>

                <div class="form-group" style="display: flex;">
                    <label class="label-width" for="severityDesc">*异常严重等级定义：</label>
                    <input style="width: 200px;height: 35px;" id="severityDesc" #levelSignInput="ngModel"
                        name="levelSign" class="input-lable" [(ngModel)]="ngDisplayForm.severityDesc" required />
                    <validation-messages [formCtrl]="levelSignInput"></validation-messages>
                </div>
                <div class="form-group">
                    <label class="label-width" for="isUsed">是否使用：</label>
                    <p-inputSwitch name="checked" #checkedInput="ngModel" [(ngModel)]="ngDisplayForm.isUsed">
                    </p-inputSwitch>

                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" [disabled]="!displayForm.form.valid" [buttonBusy]="saving"
                    [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>保存</span></button>
            </div>
        </form>
    </p-dialog>
    <p-dialog header="一级异常" [(visible)]="parentDia" (onHide)="displayclose()" modal="modal" [responsive]="true">

        <form *ngIf="parentDia" #parentDiaForm="ngForm" autocomplete="off" novalidate class="business-dept"
            (ngSubmit)="addLevelDesc()">
            <div class="p-formgroup-inline">
                <div class="p-formgroup-inline">
                    <div class="form-group" style="display: flex;">
                        <label class="label-width" for="stageSign">*一级不良名称：</label>
                        <input id="stageSign" #parentDiaInput="ngModel" name="parentDia" class="input-lable"
                            [(ngModel)]="ngparentForm.typeName" required />
                        <validation-messages [formCtrl]="parentDiaInput"></validation-messages>
                    </div>
                    <div class="form-group">
                        <label class="label-width" for="isUsed">是否使用：</label>
                        <p-inputSwitch name="parentChecked" #parentCheckedInput="ngModel"
                            [(ngModel)]="ngparentForm.isUsed">
                        </p-inputSwitch>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" [disabled]="!parentDiaForm.form.valid"
                    [buttonBusy]="savingNgParentDia" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                    <span>保存</span></button>
            </div>
        </form>
    </p-dialog>
    <p-dialog header="二级异常" [(visible)]="childDia" (onHide)="displayclose()" modal="modal" [responsive]="true">
        <form *ngIf="childDia" #childForm="ngForm" autocomplete="off" novalidate class="business-dept"
            (ngSubmit)="addInspectionDesc()">
            <div class="p-formgroup-inline">
                <div class="p-formgroup-inline">
                    <div class="form-group" style="display: flex;">
                        <label class="label-width" for="stageSign">*二级不良名称：</label>
                        <input style="width: 200px;height: 35px;" id="stageSign" #childNameInput="ngModel"
                            name="childName" class="input-lable" [(ngModel)]="ngchildForm.itemName" required />
                        <validation-messages [formCtrl]="childNameInput"></validation-messages>
                    </div>
                    <div class="form-group" style="display: flex;">
                        <label class="label-width" for="stageSign">*责任部门：</label>
                        <p-dropdown id="repairPartSelect" required name="organizationUnitsId"
                            #organizationUnitsIdSelect="ngModel" [options]="deptList" [(ngModel)]="organizationUnitsId"
                            dataKey="id" [filter]="true" filterBy="label" [optionLabel]="'displayName'"
                            placeholder="请选择">
                        </p-dropdown>
                        <validation-messages [formCtrl]="organizationUnitsIdSelect"></validation-messages>
                    </div>

                    <div class="form-group" style="display: flex;">
                        <label class="label-width" for="stageSign">*处理角色：</label>
                        <p-dropdown id="rolesPartSelect" required name="rolesPart" #rolesPartSelect="ngModel"
                            [options]="unitsList" [(ngModel)]="rolesId" dataKey="id" [filter]="true" filterBy="label"
                            [optionLabel]="'displayName'" placeholder="请选择">
                        </p-dropdown>
                        <validation-messages [formCtrl]="rolesPartSelect"></validation-messages>
                    </div>
                    <div class="form-group">
                        <label class="label-width" for="isUsed">是否使用：</label>
                        <p-inputSwitch name="parentChecked" #parentCheckedInput="ngModel"
                            [(ngModel)]="ngchildForm.isUsed">
                        </p-inputSwitch>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" [disabled]="!childForm.form.valid"
                    [buttonBusy]="savingNgChildDia" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
                    <span>保存</span></button>
            </div>
        </form>

    </p-dialog>
</div>